
<!-- saved from url=(0026)/test.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>骡窝窝问答,解决旅行问题,基于旅游的问答分享平台 - 骡窝窝</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui,viewport-fit=cover">
    <meta name="format-detection" content="telephone=no,address=no">
    <style>
        .container{
            width: 100%;
        }
        .commentbox{
            width: 100%;
            margin: 20px auto;
        }
        .mytextarea {
            width: 100%;
            overflow: auto;
            word-break: break-all;
            height: 100px;
            color: #000;
            font-size: 1em;
            resize: none;
        }
        .comment-list{
            width: 100%;
            margin: 20px auto;
            clear: both;
            padding-top: 20px;
        }
        .comment-list .comment-info{
            position: relative;
            margin-bottom: 20px;
            margin-bottom: 20px;
            border-bottom: 1px solid #ccc;
        }
        .comment-list .comment-info header{
            width: 10%;
            position: absolute;
        }
        .comment-list .comment-info header img{
            width: 100%;
            border-radius: 50%;
            padding: 5px;
        }
        .comment-list .comment-info .comment-right{
            padding:5px 0px 5px 11%;
        }
        .comment-list .comment-info .comment-right h3{
            margin: 5px 0px;
        }
        .comment-list .comment-info .comment-right .comment-content-header{
            height: 25px;
        }
        .comment-list .comment-info .comment-right .comment-content-header span,.comment-list .comment-info .comment-right .comment-content-footer span{
            padding-right: 2em;
            color: #aaa;
        }
        .comment-list .comment-info .comment-right .comment-content-header span,.comment-list .comment-info .comment-right .comment-content-footer span.reply-btn,.send,.reply-list-btn{
            cursor: pointer;
        }
        .comment-list .comment-info .comment-right .reply-list {
            border-left: 3px solid #ccc;
            padding-left: 7px;
        }
        .comment-list .comment-info .comment-right .reply-list .reply{
            border-bottom: 1px dashed #ccc;
        }
        .comment-list .comment-info .comment-right .reply-list .reply div span{
            padding-left: 10px;
        }
        .comment-list .comment-info .comment-right .reply-list .reply p span{
            padding-right: 2em;
            color: #aaa;
        }
        .more-list{ display:block; margin:15px; line-height:35px; background-color:#f0f0f0; text-align:center; color:#999; border-radius:4px; font-size:1.5rem;}
        .clearfix:after{clear:both;height:0;overflow:hidden;display:block;visibility:hidden;content:"."}
    </style>
    <link href="/css/mobile+css+head_mobile+css+ui^YVw^1526627473.css" rel="stylesheet" type="text/css">

    <link href="/css/new_ask2016.css" rel="stylesheet" type="text/css">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
	<script src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="/js/plugins/form/jquery.form.js"></script>
	<script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css" >
    <script src="/js/plugins/jquery/jquery.comment.js"></script>
    <script src="/js/common.js"></script>
    <script>
        $(function () {
            //浏览量的标志
           var flag = true;
            $('#comment').click(function () {
                var user = JSON.parse(sessionStorage.getItem("user"));
                if(user){
                    var comment = $('textarea[name=commentContent]').val();
                    if(comment){
                        $("#commentForm").ajaxSubmit(function (data) {
                            if(data.success){
                                flag = false;
                                window.location.reload();
                            }
                        })
                    }else {
                        $(document).dialog({
                            titleShow: false,
                            content: "请输入评论再提交!"
                        });
                    }
                }else {
                    $(document).dialog({
                        type : 'confirm',
                        style: 'ISO',
                        titleShow: false,
                        content: '登录后才能评论',
                        buttons: [
                            {
                                name: '跳转登录页面',
                                callback: function() {
                                    window.location.href="/login.html";
                                }
                            },
                            {
                                name: '取消',
                                callback: function() {
                                }
                            }
                        ]
                    });
                }
            })
           var params  = getParams();
           if(params.id){
               //定义浏览量
               var pageviews;
               //获取问题及提问者信息
               $.get("/questions/"+params.id,function (data) {
                   if(flag){
                       pageviews = data.pageviews + 1;
                   }

                   $.ajax({
                       url:"/questions/"+params.id,
                       data: "pageviews="+pageviews,
                       type:"PUT"
                   });
                   data.pageviews = pageviews;
                   $('.container').renderValues(data,{
                       getHref:function (item,value) {
                           var href = $(item).data("href");
                           $(item).attr("href",href+value);
                       }
                   });
               });
               //首先我们需要获取当前页的标签
               var currentInput = $('#currentPage');
               //因为我们手机滚动之前的数据就没有了,只有当前查出来的不合理
               var arr=[];
               var pages=1;
               function query() {
                   //获取当前页
                   var currentPage = currentInput.val();
                   $.get("/questions/"+params.id + "/comments",{currentPage:currentPage},function (data) {
                       pages=data.pages;
                       $('#counts').html(data.total);
                       $.ajax({
                           url:"/questions/"+params.id,
                           data: "counts="+data.total,
                           type:"PUT"
                       });
                       //把两个数组的数据合并在一起,就可以滚动了
                       $.merge(arr,data.list);
                        var json = {list:arr};

                       //评论id
                       var replyBody = 0;
                       var commentIds = [];
                       $('.renderTest').renderValues(json,{
                           getHref:function (item,value) {
                               replyBody++;
                               var href = $(item).data("href");
                               $(item).attr("href",href+value);
                           },
                           getCommentId:function (item,value) {
                               commentIds.push("reply"+value) ;
                               $(item).attr("id","reply" +value);
                           }
                       });

                       $.each(commentIds,function (index,ele) {
                           console.log(ele);
                            $('#'+ele).click(function () {
                            console.log(ele);
                            var replyBodyId = "r"+ele;
                            var temp = "<textarea cols=\"80\" rows=\"50\" id=\""+ replyBodyId +"\" placeholder=\"来说几句吧......\" class=\"mytextarea\"  name=\"replyBody\"></textarea>\n" +
                            "<span class=\"send\">发送</span>"
                            $(this).closest("div").html(temp);
                            })
                       })
                   });


                   currentInput.val(parseInt(currentPage)+1);
               }
               query();
               $('._j_add_more_button').click(function () {
                   var currentPage = currentInput.val();
                   if(currentPage<=pages){
                       query();
                   }else{
                       $(document).dialog({
                           type : 'notice',
                           infoText: '没有更多评论了!!!',
                           autoClose: 1000
                       });
                   }
               })
               //设置表单提交路径
               $("#commentForm").attr("action","/questions/"+ params.id + "/comments");
           }
        });

    </script>



</head>
<body>
<form method="post" id="pageviewsForm">
    <input type="hidden" name="pageviews">
</form>
<div class="search-head">
    <div class="row nav-search">
        <div class="col-2">
            <a href="/question.html">
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>
    </div>
</div>
    <div id="question" class="container-fluid">
        <div class="container">
            <input type="hidden"  name="id">
            <div class="form-group" >
                <h2 render-html="title"></h2>
                <div>
                    <p>
                        <a data-href="/userProfiles.html?authorId=" render-key="user.id" render-fun="getHref">
                            <img render-src="user.headImgUrl" alt="..." class="rounded-circle" width="50px">
                        </a>
                    </p>
                    <span render-html="user.nickName"></span>
                </div>
            </div>
                <img id="coverUrl" render-src="coverUrl" width="100%">
            <span render-html="content"></span>
            <div class="clearfix">
                <span class="fl-r"><b render-html="pageviews" id="pageviews"></b>浏览<b id="counts"></b>回答<b><em render-html="likenumInt"></em></b><em>顶</em></span>
            </div>
        </div>
        <input type="hidden" id="currentPage" name="currentPage" value="1">

        <div class="container-fluid">
            <form id="commentForm" method="post">
                <div class="commentbox">
                    <textarea cols="80" rows="50" placeholder="来说几句吧......" class="mytextarea" name="commentContent"></textarea>
                    <div class="btn btn-info pull-right" id="comment">评论</div>
                </div>
            </form>
            <div class="comment-list renderTest">
                <div render-loop="list">
                    <div class="comment-info">
                        <a data-href="/userProfiles.html?authorId=" render-key="list.user.id" render-fun="getHref">
                            <header><img render-src="list.user.headImgUrl"></header>
                        </a>
                        <div class="comment-right">
                            <h3 render-html="list.user.nickName"></h3>
                            <div class="comment-content-header"><i class="fa fa-clock-o fa-lg"></i><span render-html="list.createTime"></span><i class="fa fa-map-marker fa-lg"></i><span render-html="list.user.place"></span></div>
                            <p class="content" render-html="list.commentContent"></p>
                            <div class="comment-content-footer">
                                <div class="row">
                                    <div class="col-md-2"><span class="reply-btn" render-key="list.id" render-fun="getCommentId">回复</span></div>
                                </div>
                            </div>
                            <div class="reply-list"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<div style="margin-bottom: 65px;">
    <a class="more-list _j_add_more_button">更多评论</a>
</div>
</body>
</html>